<template>
	<view class="container">
		<view class="content">
			<view>
				<u-popup :show="show1" mode="bottom" :round="10">
					<view
						style="display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 10px">
						<text style="font-size: 10px; color: gray">请选择取书方式</text>
					</view>
					<view style="margin-top: 10px" @click="confirmOrder('1')">
						<u-button style="border: 0" text="配送到家"></u-button>
					</view>
					<view style="margin-top: 10px" @click="confirmOrder('2')">
						<u-button style="border: 0" text="到店自取"></u-button>
					</view>
					<view style="margin-top: 10px">
						<u-button style="border: 0" text="取消" @click="TurnOff1"></u-button>
					</view>
				</u-popup>
			</view>
			<view>
				<u-popup :show="show" mode="bottom" closeable :round="10" @close="TurnOff()">
					<view style="width: 90%;height: 200rpx;margin-top: 30rpx;display: flex;">
						<image style="width: 200rpx;height: 200rpx;border-radius: 10rpx;margin-left: 5%;"
							:src="detail.photoList[0]">
						</image>
						<view style="display: flex;flex-direction: column;justify-content: flex-end;width: 400rpx;">
							<h1 style="margin-left: 7%;width: 100">{{detail.name}}
							</h1>
							<view style="display: flex;margin-left: 7%;width: 100%;align-items: flex-end;">
								<text style="font-size: 25rpx;margin-bottom: 3%;color:mediumseagreen;">
									销售价</text>
								<text
									style="font-size: 25rpx;margin-left: 2%;margin-bottom: 3%;color:mediumseagreen">¥</text>
								<text
									style="font-size: 50rpx;font-weight: bold;color:mediumseagreen">{{detail.price}}</text>
							</view>
							<text style="font-size: 25rpx;margin-bottom:1%;margin-left: 7%;color: #9E9E9E;">已售56件</text>
							<!-- <text style="font-size: 25rpx;margin-left: 7%;color: #9E9E9E;">请选择颜色1</text> -->
						</view>
					</view>
					<view style="width: 100%;display: flex;margin-top: 7%;margin-left: 5%;">
						<view style="width: 50%;">
							<text style="font-weight: bold;font-size: 28rpx;">购买数量</text>
						</view>
						<view style="width: 40%;display: flex;justify-content: flex-end;">
							<u-number-box v-model="detail.buyNum" color="#000000" bgColor="#ffffff"
								iconStyle="color: #000"></u-number-box>
						</view>
					</view>
					<view style="width: 90;display: flex;margin-top: 7%;">
						<view style="width: 330rpx; margin-left: 5%">
							<u-button type="primary" text="加入购物车" plain @click="handleBookShelf()"></u-button>
						</view>
						<view style="width: 330rpx;margin-left: 2%">
							<u-button type="primary" text="立即购买" @click="handleBookShelf()"></u-button>
						</view>
					</view>
				</u-popup>
			</view>
			<view>
				<u-swiper :list="detail.photoList" indicator indicatorModse="line" autoplay circular
					height="350"></u-swiper>
			</view>
			<view class="content-first">
				<view class="content-first-left">
					<text style="font-size: 25rpx;margin-bottom: 6%;color:mediumseagreen">
						销售价</text>
					<text style="font-size: 25rpx;margin-left: 2%;margin-bottom: 6%;color:mediumseagreen">¥</text>
					<text
						style="font-size: 50rpx;font-weight: bold;margin-bottom: 3%;color:mediumseagreen">{{detail.price}}</text>
				</view>
				<view class="content-first-right">
					<text style="font-size: 25rpx;margin-bottom: 6%;margin-right: 5%;color: #9E9E9E;">已售56件</text>
				</view>
			</view>
			<view class="content-second">
				<text style="font-weight: bold;;margin-left: 5%;">{{detail.name}}</text>
			</view>
			<u-line></u-line>
			<view class="content-third">
				<text style="margin-left: 5%;color: #757575;font-size: 27rpx;">促销</text>
				<view
					style="width:80rpx;height: 25rpx;margin-left: 5%;border: 2rpx solid mediumseagreen;display: flex;justify-content: center;flex-direction: column;align-items: center;margin-top: 1%;">
					<text style="font-size: 20rpx;color: mediumseagreen;">满减邮</text>
				</view>
				<text style="margin-left: 5%;font-size: 26rpx;margin-top: 0.5%;">满50元，附近10公里内免配送费</text>
			</view>
			<view class="content-forth" style="margin-top: 2.5%;" @click="handleChangeSpecification()">
				<view style="width: 50%;display: flex;">
					<text style="margin-left: 10%;color: #757575;font-size: 27rpx;">数量</text>
				</view>
				<view style="width: 45%;display: flex;justify-content: flex-end">
					<u-number-box v-model="detail.buyNum" color="#000000" bgColor="#ffffff"
						iconStyle="color: #000"></u-number-box>
				</view>
			</view>
			<u-line></u-line>
			<view class="content-forth" @click="openShow1">
				<view style="width: 50%;display: flex;">
					<text style="margin-left: 10%;color: #757575;font-size: 27rpx;">配送</text>
					<text v-if="detail.type == '1'" style="margin-left: 10%;font-size: 27rpx;">配送到家</text>
					<text v-if="detail.type == '2'" style="margin-left: 10%;font-size: 27rpx;">到店自取</text>
				</view>
				<view style="width: 45%;display: flex;justify-content: flex-end">
					<u-icon name="arrow-right" color="#757575"></u-icon>
				</view>
			</view>
			<view class="content-goods">
				<u-divider text="推荐商品" textSize="18" textColor="#000000"></u-divider>
				<view class="container-goods-body">
					<view class="content-goods-item" v-for="(goods, index) in goodsList" :key="goods.id">
						<view class="content-goods-item-photo" @click="goodsDetail(goods.id)">
							<image v-if="goods.photo != null" style="width: 100%;height: 100%;" :src="goods.photo">
							</image>
							<image v-if="goods.photo == null" style="width: 100%;height: 100%;"
								src="https://www.taotaohomecraft.press/prod-api/profile/non-photo.png">
							</image>
						</view>
						<view class="content-goods-item-text">
							<text
								style="height:50rpx;font-size: 24rpx;margin-left: 5%;margin-top: 5%;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; display: block; ">{{goods.goodsName}}</text>
							<view class="content-goods-item-text1">
								<view class="content-goods-item-text-left">
									<view
										style="width:70rpx;margin-left: 5%;margin-top: 5%;border: 2rpx solid mediumseagreen;display: flex;justify-content: center;flex-direction: column;align-items: center;">
										<text style="font-size: 17rpx;color: mediumseagreen;">满50包邮</text>
									</view>
									<view style="margin-left: 5%;margin-top: 5%;display: flex;align-items:flex-end">
										<text
											style="font-size: 23rpx;font-weight: bold;margin-bottom: 2%;color:mediumseagreen">¥</text>
										<text
											style="font-size: 33rpx;font-weight: bold;color:mediumseagreen ;">{{goods.price}}</text>
									</view>
								</view>
								<view class="content-goods-item-text-right">
									<u-icon name="shopping-cart" size="25" color="mediumseagreen"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-button">
			<view style="width: 10%">
				<u-icon name="home" label="首页" labelPos="bottom" size="28"
					@click="handleSwitchPath('/pages/home/index')"></u-icon>
			</view>
			<view style="width: 15%; margin-left: 5%">
				<u-icon name="shopping-cart" label="购物车" labelPos="bottom" size="28"
					@click="handleSwitchPath('/pages/bookshelf/index')"></u-icon>
			</view>
			<view style="width: 100px; margin-left: 10%">
				<u-button type="primary" text="加入购物车" plain @click="handleBookShelf()"></u-button>
				<!-- <u-button type="primary" color="#FF3030" text="移除书架" plain @click="handleremoveBookShelf()"></u-button> -->
			</view>

			<view style="width: 100px;margin-left: 5%">
				<u-button type="primary" text="立即购买" @click="handleBuyNow()"></u-button>
			</view>
		</view>
		<view>
			<u-modal content="是否将该商品加入购物车？" :show="show2" showCancelButton closeOnClickOverlay
				@confirm="confirmBookShelf" @cancel="cancelShow2()" @close="cancelShow2()"></u-modal>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsDetail,
		joinBookShelf
	} from '@/api/goods';
	import config from '@/config';
	export default {
		data() {
			return {
				orderInfo: {
					goodsList: [],
					addressInfo: {},
					type: '',
				},
				detail: {
					buyNum: 1,
					type: '1'
				},
				list3: [],
				show: false,
				show1: false,
				show2: false,
				show3: false,
				isActive: false,
				goodsList: [{
					id: 1,
					goodsName: '毕业徽章',
					photo: 'https://img0.baidu.com/it/u=3749404169,3428955615&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
					price: 22
				}, {
					id: 2,
					goodsName: '书香校园钢笔毛笔套装',
					photo: null,
					price: 238
				}, {
					id: 3,
					goodsName: '大功告成帆布包',
					photo: null,
					price: 35
				}]
			}
		},
		onLoad(options) {
			this.getInfo(options.goodsId);
		},
		methods: {
			async getInfo(goodsId) {
				console.log('goodsId', goodsId)
				const res = await getGoodsDetail(goodsId);
				console.log('商品信息', res)
				if (res.code === 200) {
					this.detail = res.data
					this.detail.buyNum = 1;
					this.detail.type = '1'
				}
			},
			goodsDetail(goodsId) {
				uni.navigateTo({
					url: `/goods/goods-detail/index?goodsId=${goodsId}`
				});
			},
			clickImg() {
				uni.previewImage({
					urls: [
						'https://www.taotaohomecraft.press/prod-api/profile/upload/2025/06/28/乔乔的奇妙冒险1-5_20250628110656A035.jpg'
					], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '',
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			handleChangeSpecification() {
				this.show = true
			},
			TurnOff() {
				this.show = false
			},
			TurnOff1() {
				this.show1 = false
			},
			toggleActive() {
				this.isActive = !this.isActive
			},
			openShow1() {
				this.show1 = true
			},
			confirmOrder(type) {
				this.detail.type = type
				this.show1 = false
			},
			handleBookShelf() {
				this.show2 = true
			},
			handleremoveBookShelf() {
				this.show3 = true
			},
			cancelShow2() {
				this.show2 = false;
			},
			cancelShow3() {
				this.show3 = false
			},
			async confirmBookShelf() {
				const res = await joinBookShelf("1", this.detail.id, this.detail.buyNum);
				if (res.code == 200) {
					uni.showToast({
						title: "加入成功"
					})
					this.show2 = false
				}
			},
			handleSwitchPath(path) {
				uni.reLaunch({
					url: path // 单个属性无需逗号
				});
			},
			handleBuyNow() {
				let goodsInfo = {
					id: this.detail.id,
					name: this.detail?.name || '未知商品',
					photo: this.detail?.photoList?.[0] || null,
					price: this.detail?.price || 0,
					buyNum: this.detail?.buyNum || 1,
					classifyName: this.detail?.classifyName || '暂无分类'
				};
				this.orderInfo.type = this.detail.type
				this.orderInfo.buyNum = this.detail.buyNum
				this.orderInfo.goodsList = []
				this.orderInfo.goodsList.push(goodsInfo)
				let data = this.orderInfo
				console.log('提交信息', data)
				uni.navigateTo({
					url: `/order/goodsOrder/index?data=${encodeURIComponent(JSON.stringify(data))}`
				});
			}
		}
	}
</script>

<style lang="less">
	.active-style {
		opacity: 0.9;
		transform: scale(0.98);
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		height: 100vh;
		overflow: hidden;
		background-color: #f5f5f5;
	}

	.content {
		width: 100%;
		// height: calc(100vh - 120px);
		/* 根据实际导航栏高度调整 */
		overflow-y: auto;
		// display: flex;
		// flex-direction: column;
		// justify-content: center;
		/* 允许内容滚动 */
	}

	.content-first {
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
	}

	.content-first-left {
		width: 50%;
		height: 100%;
		display: flex;
		margin-left: 5%;
		align-items: flex-end;
	}

	.content-first-right {
		width: 50%;
		height: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end
	}

	.content-second {
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
	}

	.content-third {
		width: 100%;
		height: 90rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
	}

	.content-forth {
		width: 100%;
		height: 90rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
	}

	.content-goods {
		width: 100%;
		height: 480rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-top: 3%;
		margin-bottom: 40%;
	}

	.container-goods-body {
		width: 95%;
		// background-color: aquamarine;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-between;
		justify-content: center;
		gap: 20rpx;
	}

	.content-goods-item {
		width: 220rpx;
		height: 350rpx;
		// background-color: seagreen;
		display: flex;
		flex-direction: column;
		border: 2rpx solid #FFFFFF;
		/* 边框宽度8rpx，实线，深灰色 */
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		/* 可选阴影效果 */
	}

	.content-goods-item-photo {
		width: 100%;
		height: 320rpx;
	}

	.content-goods-item-text {
		width: 100%;
		height: 180rpx;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
	}

	.content-goods-item-text1 {
		width: 100%;
		height: 100%;
		display: flex;
	}

	.content-goods-item-text-left {
		width: 80%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.content-goods-item-text-right {
		width: 20%;
		height: 100%;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		/* 可选调整间距 */
		padding: 11rpx;
		// flex-direction: column;
	}

	.footer-button {
		display: flex;
		// z-index: 999;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		/* 按钮背景色 */
		padding: 10px;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	}
</style>